<template>
	<view>
		<nav-custom :name="title"></nav-custom>
		<view class="list">
			<view class="back bor_bot">
				<view class="dis_f_sb_c bor_b_bot">
					<view class="black_s_28">手机号</view>
					<view class="list_bo dis_f_sb_c">
						<view class="black_f_28">{{info.phone}}</view>
						<view v-if="is_show" @click="choose()" class="blue_f_28">获取验证码</view>
						<view v-if="!is_show" class="blue_f_28">
							{{ countdown }}秒后重新发送
						</view>
					</view>
				</view>

				<view class="dis_f_sb_c bor_b_bot">
					<view class="black_s_28">验证码</view>
					<view class="list_bo dis_f_r_c">
						<u--input placeholder="请填写验证码" maxlength="4" fontSize="14" border="none" v-model="value1"
							@blur="blur1"></u--input>
					</view>
				</view>
				<view class="dis_f_sb_c bor_b_bot">
					<view class="black_s_28">设置密码</view>
					<view class="list_bo ">
						<u--input placeholder="请填写六位数支付密码" clearable :password="password" maxlength="6" fontSize="14"
							border="none" v-model="value2" @blur="blur2"></u--input>
					</view>
				</view>
				<view class="dis_f_sb_c">
					<view class="black_s_28">确认密码</view>
					<view class="list_bo ">
						<u--input placeholder="请再次填写六位数支付密码确认" clearable :password="password" maxlength="6"
							fontSize="14" border="none" v-model="value3" @blur="blur3"></u--input>
					</view>
				</view>
			</view>
		</view>
		<view class="bule_back_but white_f_32 bot_wz" @click="submit">
			确定
		</view>
		<!-- <image class="bo_js_img" src="../../static/image/zcxian.png" mode=""></image> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: "支付密码",
				value: '',
				value1: '',
				value2: '',
				value3: '',
				password: true,
				is_show: true,
				countdown: 60, // 初始倒计时时间
				timer: null, // 定时器对象
				info:[],
				url:''
			}
		},
		// mounted() {
		// 	this.startCountdown();
		// },
		onLoad() {
			this.url=this.$.ajax_url3
			this.get_info()
		},
		methods: {
			get_info(){
				this.$.ajax(1,'post','store/store/store_information',{},(res)=>{
					if(res.code == 200){
						this.info = res.data
					}else{
						this.$.ti_shi(res.msg)
					}
				});
			},
			submit(){
				if(this.value1 == ''){
					return this.$.ti_shi('请输入验证码')
				}
				if(this.value2 == ''){
					return this.$.ti_shi('请输入密码')
				}
				if(this.value2 != this.value3){
					return this.$.ti_shi('两次密码不一致')
				}
				this.$.ajax(1,'post','store/store/pay_set',{
					mobile:this.info.phone,
					code:this.value1,
					password:this.value2,
					q_password:this.value3,
				},(res)=>{
					this.$.ti_shi(res.msg)
					if(res.code == 200){
						setTimeout(()=>{
							this.$.back()
						},600)
					}
				});
			},
			blur(e) {
				// console.log('change', e);
			},
			blur1(e) {
				// console.log('change', e);
			},
			blur2(e) {
				// console.log('change', e);
			},
			blur3(e) {
				// console.log('change', e);
			},
			choose() {
				if(!this.$.is_phone(this.info.phone)){
					return this.$.ti_shi('手机号格式错误')
				}
				this.$.ajax(1,'post','sms/send',{
					mobile:this.info.phone
				},(res)=>{
					this.$.ti_shi(res.msg)
					if(res.code == 1){
						this.show = false
						this.timer = setInterval(() => {
							if (this.countdown > 0) {
								this.countdown--;
							} else {
								this.show = true
								this.countdown = 60
							}
						}, 1000);
					}
				})
				
			},
			startCountdown() {
				this.timer = setInterval(() => {
					if (this.countdown > 0) {
						this.countdown--;
					} else {
						this.is_show = false
					}
				}, 1000);
			}
		}
	}
</script>

<style>
	.list {
		margin-top: 200rpx;
		padding: 0 32rpx;
	}

	.list_bo {
		width: 478rpx;
		border-bottom: 2rpx solid #F7FAFF;
		padding-bottom: 10rpx;
		margin-top: 14rpx;
	}

	.r_img {
		width: 32rpx;
		height: 32rpx;
	}
</style>